<template>
  <div>
    <div class="pb bgf">
      <a-breadcrumb>
        <a-breadcrumb-item>票据融资申请</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="well-layout">
      <div class="title">如果进行票据融资？</div>
      <div class="hr"></div>
      <ul class="list">
        <li class="li" v-for="(item, index) in listData" :key="index">{{item}}</li>
      </ul>
    </div>
    <div class="well-layout">
      <div class="title">请提交融资申请信息</div>
      <div class="hr"></div>
      <div class="pb">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="出票人"
          >
            <a-input
              v-decorator="['drawer', {rules: [{required: true, message: '请输入出票人'}]}]"
              placeholder="请输入出票人"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="收款人"
          >
            <a-input
              v-decorator="['payee', {rules: [{required: true, message: '请输入收款人'}]}]"
              placeholder="请输入收款人"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="承兑人"
          >
            <a-input
              v-decorator="['acceptor', {rules: [{required: true, message: '请输入承兑人'}]}]"
              placeholder="请输入承兑人"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="出票日期"
          >
            <a-date-picker
              style="width: 100%"
              placeholder="出票日期"
              v-decorator="['issueDate', {rules: [{required: true, message: '请选择出票日期'}]}]"
            ></a-date-picker>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="到期日"
          >
            <a-date-picker
              style="width: 100%"
              placeholder="请选择到期日"
              v-decorator="['endDate', {rules: [{required: true, message: '请选择到期日'}]}]"
            ></a-date-picker>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="票据号码"
          >
            <a-input
              v-decorator="['billNumber', {rules: [{required: true, message: '请输入票据号码'}]}]"
              placeholder="请输入票据号码"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="票据金额（万元）"
          >
            <a-input
              v-decorator="['billAmount', {rules: [{required: true, message: '请输入票据金额'}]}]"
              placeholder="请输入票据金额"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            required
            label="票据文件"
          >
            <FileUp
              :params="{ editStash:true, fileList: billFileDtoList, fileType: 3, changeData: changeBillFileDtoList }"
            />
            <span>
              电子票据图片
              <a-popover title="票据文件示例">
                <template slot="content">
                  <img style="width: 700px" src="../../../assets/img/WechatIMG1582.png" alt="img">
                </template>
                <a href="javascript:;">示例</a>
              </a-popover>
            </span>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="申请融资金额（万元）"
          >
            <a-input
              v-decorator="['applyAmount', {rules: [{required: true, message: '请输入融资金额'}]}]"
              placeholder="请输入融资金额，不可超过票据金额"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系人姓名"
          >
            <a-input
              v-decorator="['contactName', {rules: [{required: true, message: '请输入联系人姓名'}]}]"
              placeholder="请输入联系人姓名"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系人职位"
          >
            <a-input
              v-decorator="['contactTitle', {rules: [{required: true, message: '请输入联系人职位'}]}]"
              placeholder="请输入联系人职位"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系人电话"
          >
            <a-input
              v-decorator="['contactPhone', {rules: [{required: true, message: '请输入联系人电话'}]}]"
              placeholder="请输入联系人电话"
            ></a-input>
          </a-form-item>
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="联系人邮箱"
          >
            <a-input
              v-decorator="['contactEmail', {rules: [{required: true, message: '请输入联系人邮箱'}]}]"
              placeholder="请输入联系人邮箱"
            ></a-input>
          </a-form-item>
          <a-form-item :wrapper-col="{ span:8, offset: 8}">
            <a-button type="primary" html-type="submit" :loading="btnLoading">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>
<script>
import { Form } from 'ant-design-vue'
import FileUp from '../../../components/FileUp'
import { postBill } from '../../../assets/api/billFinancing'
export default {
  name: 'BillCreate',
  components: {
    FileUp
  },
  data () {
    return {
      listData: [
        '上传票据和融资信息，线上提交',
        '我们将在3个工作日内反馈初审结果',
        '点击同意初审反馈的融资额度和利率',
        '工作人员与您电话联系，提供补充材料进入复审',
        '复审通过后，签订融资合同',
        '在ECDS系统中把票据背书给云成保理公司',
        '全部手续完成后3个工作日放款'
      ],
      formItemLayout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 8 }
      },
      billFileDtoList: []
    }
  },
  computed: {
    form () {
      return Form.createForm(this)
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          alert(JSON.stringify(values))
        }
      })
    },
    async submit (params) {
      this.btnLoading = true
      const res = await postBill(params)
      this.btnLoading = false
      if (res.error) {
        this.$message.error(res.error.msg)
      } else {
        this.$message.success('提交成功')
        this.$router.push('/item/october/billdetail')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 16px;
}
</style>
